<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>房源列表 - 吉象出海</title>
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        /* 全局链接样式 */
        a {
            color: inherit;
            text-decoration: none;
        }
        
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 60px;
        }
        
        /* 顶部品牌区 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
        }
        
        .back-btn {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: var(--primary);
            cursor: pointer;
            z-index: 1;
        }
        
        /* ===== 优化后的筛选区域 ===== */
        .filter-section {
            padding: 15px;
            background: white;
            border-bottom: 1px solid #e5e7eb;
            position: relative;
        }
        
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .filter-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .filter-reset {
            font-size: 13px;
            color: var(--primary);
            background: none;
            border: none;
            padding: 0;
        }
        
        .filter-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 5px;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            padding: 8px 15px;
            border-radius: 20px;
            background: var(--light-bg);
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .filter-tab.active {
            background: var(--primary);
            color: white;
            font-weight: 500;
        }
        
        /* 排序栏 */
        .sort-section {
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e5e7eb;
            background: white;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .sort-options {
            display: flex;
            gap: 15px;
            font-size: 13px;
        }
        
        .sort-option {
            color: #6B7280;
            cursor: pointer;
        }
        
        .sort-option.active {

            color: var(--primary);
            font-weight: 500;
        }
        
        .filter-toggle {
            font-size: 13px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        
        /* 房源卡片 */
        .property-list {
            padding: 0 15px;
        }
        
        .property-card-link {
            display: block;
            margin-bottom: 20px;
            color: inherit;
        }
        
        .property-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s ease;
        }
        
        .property-card-link:hover .property-card {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .property-card.featured {
            border: 2px solid var(--danger);
        }
        
        .property-image {
            height: 200px;
            background: #E5E7EB;
            position: relative;
            background-size: cover;
            background-position: center;
        }
        
        .property-favorite {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            cursor: pointer;
            z-index: 2;
        }
        
        .property-favorite.active {
            color: var(--danger);
        }
        
        .property-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--danger);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .property-vr {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .property-content {
            padding: 15px;
        }
        
        .property-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        .property-agent {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .agent-badge {
            background: var(--secondary);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .property-location {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #6B7280;
            margin-bottom: 10px;
        }
        
        .property-location::before {
            content: "📍";
            margin-right: 4px;
        }
        
        .property-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 12px;
        }
        
        .property-price {
            color: var(--danger);
            font-weight: 700;
            font-size: 18px;
        }
        
        .price-comparison {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
        }
        
        .property-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }
        
        .property-tag {
            background: var(--light-bg);
            color: var(--text);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .tag-level1 {
            background: rgba(208, 2, 27, 0.1);
            color: var(--danger);
        }
        
        .tag-level2 {
            background: rgba(46, 139, 87, 0.1);
            color: var(--secondary);
        }
        
        .trust-badges {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            font-size: 12px;
        }
        
        .trust-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #6B7280;
        }

        /* 底部导航菜单 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
            z-index: 1000;
            max-width: 428px;
            margin: 0 auto;
            border-radius: 20px 20px 0 0;
        }

        .tab-bar a.tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 5px 10px;
            min-height: 60px;
            border-radius: 16px;
            margin: 0 5px;
            transition: all 0.2s ease;
            position: relative;
            cursor: pointer;
            color: #495057;
        }

        .tab-item.active {
            background: rgba(234, 168, 42, 0.15);
            color: var(--primary);
        }

        .tab-item.active .tab-icon {
            color: var(--primary);
            transform: scale(1.1);
        }

        .tab-item.active .tab-label {
            font-weight: 600;
        }

        .tab-icon {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: all 0.2s ease;
            color: #6c757d;
        }

        .tab-item.active .tab-icon {
            color: var(--primary);
        }

        .tab-label {
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
		  /* 服务区域 */
        .services-section {
            padding: 0 15px;
            margin-bottom: 15px;
        }
        
        .services-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: 700;
            position: relative;
            padding-left: 12px;
        }
        
        .services-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .view-all {
            color: var(--primary);
            font-size: 14px;
            font-weight: 500;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .service-item {
            text-align: center;
            background: white;
            border-radius: 10px;
            padding: 12px 5px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .service-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        
        .service-icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            transition: all 0.3s ease;
        }
        
        .service-name {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
        }
        
        .more-services {
            grid-column: span 4;
            background: var(--primary);
            color: white !important;
            font-weight: 600;
            padding: 14px;
            font-size: 15px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
    </style>
</head>
<body>
    <!-- 顶部品牌区域 -->
    <header class="brand-header">
        <div class="back-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </div>
        <div class="brand-title">吉象出海</div>
        <div class="brand-subtitle">泰国专业房地产服务平台</div>
    </header>



    <!-- 优化后的筛选区域 -->
    <section class="filter-section">
         <div class="more-services service-item">
                <i class="fas fa-th-large"></i>
                <div class="service-name"><a href="map.html">地图找房</a></div>
            </div>
    </section>
    
    <!-- 排序区域 -->
    <section class="sort-section">
        <div class="sort-options">
            <div class="sort-option active">综合推荐</div>
            <div class="sort-option">最新</div>
            <div class="sort-option">价格</div>
            <div class="sort-option">带看量</div>
        </div>
        
        <div class="filter-toggle">
            <span>筛选</span>
            <span>▼</span>
        </div>
    </section>
    
    <!-- 房源列表 -->
    <div class="property-list">
        <!-- 新房卡片 -->
        <a href="housedetails.html" class="property-card-link">
            <div class="property-card featured">
                <div class="property-image" style="background-image: url('https://example.com/house1.jpg')">
                    <div class="property-favorite">❤️</div>
                    <div class="property-badge">新房</div>
                    <div class="property-vr">🟢 VR实景</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>曼谷河畔公寓</span>
                        <span class="property-price">450万泰铢</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>张经理 · 服务分96</span>
                    </div>
                    
                    <div class="property-location">曼谷·湄南河畔</div>
                    
                    <div class="property-details">
                        <div>2室2厅 | 78㎡ | 南向</div>
                        <div class="price-comparison">同小区均价：480万泰铢</div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag tag-level1">🔥必看好房</div>
                        <div class="property-tag tag-level2">🏅金牌中介</div>
                        <div class="property-tag">精装修</div>
                        <div class="property-tag">河景</div>
                        <div class="property-tag">可VR看房</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 二手房卡片 -->
        <a href="housedetails.html" class="property-card-link">
            <div class="property-card">
                <div class="property-image" style="background-image: url('https://example.com/house2.jpg')">
                    <div class="property-favorite active">❤️🔥</div>
                    <div class="property-badge">二手房</div>
                    <div class="property-vr">🟢 VR实景</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>素坤逸豪华公寓</span>
                        <span class="property-price">280万泰铢</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>王经理 · 服务分89</span>
                    </div>
                    
                    <div class="property-location">曼谷·通罗区</div>
                    
                    <div class="property-details">
                        <div>2室1厅 | 68㎡ | 南向</div>
                        <div class="price-comparison">区域均价：265万泰铢</div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag tag-level2">🌟新上房源</div>
                        <div class="property-tag">精装修</div>
                        <div class="property-tag">泳池</div>
                        <div class="property-tag">24h安防</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
        </a>
        
        <!-- 租房卡片 -->
        <a href="housedetails.html" class="property-card-link">
            <div class="property-card">
                <div class="property-image" style="background-image: url('https://example.com/house3.jpg')">
                    <div class="property-favorite">❤️</div>
                    <div class="property-badge">租房</div>
                </div>
                <div class="property-content">
                    <div class="property-title">
                        <span>普吉岛海景别墅</span>
                        <span class="property-price">35,000泰铢/月</span>
                    </div>
                    
                    <div class="property-agent">
                        <span class="agent-badge">⭐金牌中介</span>
                        <span>李中介 · 服务分92</span>
                    </div>
                    
                    <div class="property-location">普吉岛·卡伦海滩</div>
                    
                    <div class="property-details">
                        <div>3室2厅 | 180㎡ | 海景</div>
                        <div class="price-comparison">区域均价：40,000泰铢/月</div>
                    </div>
                    
                    <div class="property-tags">
                        <div class="property-tag tag-level1">🔥必看好房</div>
                        <div class="property-tag">海景</div>
                        <div class="property-tag">私人泳池</div>
                        <div class="property-tag">可短租</div>
                    </div>
                    
                    <div class="trust-badges">
                        <div class="trust-badge">🔒 资金监管</div>
                        <div class="trust-badge">📜 产权验真</div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 底部导航菜单 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </a>
        <a href="message.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </a>
        <a href="postlist.html" class="tab-item active">
            <div class="tab-icon"><i class="fas fa-plus-circle"></i></div>
            <div class="tab-label">发布</div>
        </a>
        <a href="entrust.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </a>
        <a href="profile.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </a>
    </div>
    
    <script>
        // 返回按钮功能
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });

        // 筛选标签切换
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.property-favorite').forEach(icon => {
            icon.addEventListener('click', function(e) {
                e.stopPropagation();
                e.preventDefault();
                this.classList.toggle('active');
                this.textContent = this.classList.contains('active') ? '❤️🔥' : '❤️';
            });
        });
        
        // 排序选项切换
        document.querySelectorAll('.sort-option').forEach(option => {
            option.addEventListener('click', function() {
                document.querySelectorAll('.sort-option').forEach(opt => opt.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 底部导航交互
        document.querySelectorAll('.tab-bar a.tab-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if(this.classList.contains('active')) {
                    e.preventDefault();
                }
                document.querySelectorAll('.tab-bar a.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>